<template>
    <div id="pressureDate" class="pressureDate">
		<div class="content_wrap">
            <hj-table :apiURL="getTableData" :tableColumn="tableColumn" :searchList="searchList" :searchModel="searchModel" :searchOpeartors="searchOpeartors"></hj-table>
        </div>
	</div>
</template>

<script>
import {exporYLSJData} from '@/api/index.js'
import { saveAs } from 'file-saver'
export default {
	name:'pressureDate',
	data(){
		return {
			tableColumn:[
                {
                    prop:'name',
                    label:'站点名称'
                },
                {
                    prop:'uploadTime',
                    label:'上传时间'
                }, {
                    prop:'press',
                    label:'压力（MPa）'
                },{
                    prop:'instantaneousTraffic',
                    label:'瞬时流量（m³/s）'
                },{
                    prop:'todayTraffic',
                    label:'今日流量（m³/s）'
                },{
                    prop:'yesterdayTraffic',
                    label:'昨日流量（m³/s）'
                },{
                    prop:'actualAccumulation',
                    label:'实际累计（m³/s）'
                },{
                    prop:'reverseAccumulation',
                    label:'反向累计（m³/s）'
                },{
                    prop:'batteryVoltage',
                    label:'电池电压(V)'
                }
            ],
            searchList:[
                {
                    index:1,
                    name:'startDate',
                    label:'开始时间',
                    placeholder:'开始时间',
                    type:'date',
                    format:'yyyy-MM-dd'
                },
                {
                    index:2,
                    label:'截止时间',
                    name:'endDate',
                    placeholder:'截止时间',
                    type:'date',
                    format:'yyyy-MM-dd'
                }
            ],
            searchModel:{
                startDate:'',
                endDate:''
            },
            searchOpeartors:[
                {
                    text:'查询',
                    name:'search',
                    type:'primary'
                },
                {
                    text:'重置',
                    name:'reSet',
                    type:''
                }
            ],
		}
	},
	components:{
        HjTable:() => import('@/components/hjTable/HJTable')
	},
	mounted(){
		this.getTableData();
	},
	methods:{
		getTableData(params){
			return this.$axios.post('http://43.136.137.111:9898/system/site/pressure/list',params);
		},
		handleSizeChange(val){
			this.pageSize = val;
			this.getTableData();
		},	
		handleCurrentChange(val){
			this.pageNum = val;
			this.getTableData();
		},
		//导出
		doExport(){
			this.fullscreenLoading = true;
			exporYLSJData({ids:this.selectIds}).then(res => {
				let blob = new Blob([res.data])
				const fliName = '压力数据'+new Date().getTime()+ '.xlsx'
				saveAs(blob,fliName)
				this.fullscreenLoading = false;
			}).catch(error => {
				console.log(error)
			})
		},
		//选择		
		selectChange(selection){
			let arr = [];
			selection.forEach(element => {
				arr.push(element.id)
			});
			this.selectIds = arr;
		}
	}
}
</script>

<style lang="less" scoped>
.pressureDate{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #02182d;
		box-sizing: border-box;
		.content_wrap{
			position: relative;
			width: 100%;
            height: 100%;
			box-sizing: border-box;
			padding: 135px 25px 30px 25px;
			.el-table, .el-table__expanded-cell{
				background-color: transparent;
			}
			.el-table{
				margin-top: 10px;
				tr{
					height: 56px;
					background:transparent;
					color: rgba(255, 255, 255, 0.65);
				}
				.el-table th.el-table__cell{
					background-color: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%);
				}	
				th.el-table__cell{
					background: rgba(11, 117, 216, 0.1);;
				}
				td.el-table__cell, th.el-table__cell.is-leaf{
					border-bottom: 1px solid rgba(255, 255, 255, 0.1);;
				}
			}
		  
			.el-table::before{
				display: none;
			}
			.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
					background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
					color: rgba(2, 154, 250, 1);
				}
				
			.el-button--primary{
				color: rgba(255, 255, 255, 0.65);
				background: transparent;
				border-color: #023557;
			}
			.el-button--primary:hover{
				border-color: rgba(2, 154, 250, 1);;
				color: rgba(2, 154, 250, 1);
			}
			.el-checkbox__inner{
				background: transparent;
				width: 15px;
				height: 15px;
				border: 1px solid rgba(255, 255, 255, 0.5);
			}

			.block{
				margin-top: 10px;
				text-align: center;
				color: rgba(255, 255, 255, 1);
				.el-input__inner{
					border: 1px solid rgba(255, 255, 255, 0.3);
					background: transparent;
				}
				.el-pager li{
					background: transparent;
				}
				.el-pagination .btn-next, .el-pagination .btn-prev{
					background: transparent;
				}
				span,input,i,li{
					color: #FFFFFF;
				}
			}
		}
	}
	
</style>